<template>
  <div id="Create">
    <el-row>
      <el-input v-model="input_Questionaire_Name" placeholder="请输入问卷名"></el-input>
    </el-row>
    <el-row>
      <el-input v-model="input_Questionaire_Address" placeholder="请输入问卷地址"></el-input>还没有问卷链接 <el-button type="info"  plain  @click="Link('https://www.wjx.cn/')">创建问卷</el-button>

    </el-row>
    <div class="block">
      <span class="demonstration">日期选择</span>
      <el-date-picker
        v-model="DateValue"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions">
      </el-date-picker>
    </div>
    <el-input v-model="input_Questionaire_Number" placeholder="请输入问卷数量"></el-input>
    <el-row>
      <el-select v-model="TargetGroup" placeholder="目标人群">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-row>
    <el-input v-model="input_Questionaire_Price" placeholder="请输入问卷价格"  onkeyup="value=value.replace(/[^\d^\.]+/g,'')"
    ></el-input>
    <el-row >
      <el-button type="primary"  plain  v-on:click="Show">确认</el-button>
    </el-row>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'Create',
  components: {

  },
  data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            input_Questionaire_Name: '',
            input_Questionaire_Address: '',
            input_Questionaire_Number:'',
            input_Questionaire_Price: '',
            DateValue: '',
            TargetGroup: '',
            options: [{
                value: '选项1',
                label: '学生'
            }, {
                value: '选项2',
                label: '老师'
            }, {
                value: '选项3',
                label: '程序员'
            }, {
                value: '选项4',
                label: '金融从业者'
            }, {
                value: '选项5',
                label: '作家'
            }]


        };
    },
  methods: {
    Show: function () {
          alert (this.DateValue)
      },
      Link: function (url) {
          window.location.href = url
      }
    },
    watch: {
        input_Questionaire_Number: function (val) {
            this.input_Questionaire_Number = val.replace(/\D/g, '');
        }
    }
}
</script>

<style scoped>
#Create{
  margin-left: 20%;
}
.el-input{
  margin: 10px;
  padding: 10px;
  width: 40%;
}
.el-select{
  margin: 10px;
  padding: 10px;
  width: 40%;
}
.block{
  margin: 10px;
  padding: 10px;
  width: 40%;
}
.el-button{
  width: 10%;
  margin-left: 10%;
  left: 40%;
}
</style>
